<!--
 * @Description: 修改密码
 * @Date:
 * @LastEditTime:
 * @FilePath:
-->
<template>
  <div class="card content-box">
    <span class="text"> 修改密码 🍓🍇🍈🍉</span>
    <div class="content-box-main">
      <el-steps :active="active" align-center>
        <el-step title="填写验证信息" />
        <el-step title="确认新密码" />
        <el-step title="完成" />
      </el-steps>
      <!-- <el-button style="margin-top: 12px" @click="next"></el-button> -->
      <div class="content">
        <Step1 v-if="active === 1" @next="next" />
        <Step2 v-if="active === 2" @next="next" @prev="prev" />
        <Step3 v-if="active === 3" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Step1 from "./components/Step1.vue";
import Step2 from "./components/Step2.vue";
import Step3 from "./components/Step3.vue";

const active = ref(1);
const next = () => {
  if (active.value < 3) {
    active.value += 1;
  }
};
const prev = () => {
  if (active.value > 1) {
    active.value -= 1;
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
